<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="200px"
    >
      <el-form-item label="商品名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入商品名称"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="店铺类型" prop="catId">
        <el-select
          v-model="queryParams.catId"
          placeholder="请选择店铺类型"
          clearable
          class="!w-240px"
        >
          <el-option
            v-for="dict in typeList"
            :key="dict.id"
            :label="dict.typeName"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="店铺" prop="shopId">
        <el-select
          v-model="queryParams.shopId"
          placeholder="请选择店铺"
          clearable
          filterable
          class="!w-240px"
        >
          <el-option
            v-for="dict in shopPageList"
            :key="dict.id"
            :label="dict.shopName"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="上下架信息" prop="saleable">
        <el-select
          v-model="queryParams.saleable"
          placeholder="请选择上下架信息"
          clearable
          class="!w-240px"
        >
          <el-option
            v-for="dict in saleableList"
            :key="dict.id"
            :label="dict.typeName"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否封禁" prop="status">
        <el-select
          v-model="queryParams.status"
          placeholder="请选择店铺类型"
          clearable
          class="!w-240px"
        >
          <el-option
            v-for="dict in statusList"
            :key="dict.id"
            :label="dict.typeName"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery"> <Icon icon="ep:search" class="mr-5px" /> 搜索 </el-button>
        <el-button @click="resetQuery"> <Icon icon="ep:refresh" class="mr-5px" /> 重置 </el-button>
        <el-button type="primary" @click="openForm('create', null)">
          <Icon icon="ep:plus" class="mr-5px" /> 新增
        </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>
  <!-- 列表 -->
  <ContentWrap>
    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
      <el-table-column label="商品名称" align="center" prop="name" />
      <el-table-column label="店铺名称" align="center" prop="shopId">
        <template #default="{ row }">
          {{ getShopName(row.shopId) }}
        </template>
      </el-table-column>
      <el-table-column label="销量" align="center" prop="saleNum" />
      <el-table-column label="上下架信息" align="center" prop="saleable">
        <template #default="{ row }">
          {{ row.saleable === 1 ? '上架' : '下架' }}
        </template>
      </el-table-column>
      <el-table-column label="库存" align="center" prop="stock" />
      <el-table-column label="是否置顶" align="center" prop="isTop">
        <template #default="{ row }">
          {{ row.isTop === 0 ? '否' : '是' }}
        </template>
      </el-table-column>
      <el-table-column label="是否封禁" align="center" prop="status">
        <template #default="{ row }">
          {{ row.status === 0 ? '封禁' : '正常' }}
        </template>
      </el-table-column>
      <el-table-column label="商品原价" align="center" prop="originPrice" />
      <el-table-column label="商品售价" align="center" prop="salePrice" />
      <el-table-column label="操作" align="center" class="w-120px">
        <template #default="scope">
          <el-button type="primary" plain @click="openForm('update', scope.row)"> 修改 </el-button>
          <el-button type="primary" plain @click="openComment('parent', scope.row)">
            评论
          </el-button>
          <el-button type="danger" plain @click="handleDelete(scope.row)"> 删除 </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </ContentWrap>
  <!-- 弹窗 -->
  <Dialog
    :title="dialogShowInputTitle"
    v-model="dialogShowInput"
    style="display: block; flex-direction: column; width: 1200px"
  >
    <el-form :model="formData" :rules="formRules" label-width="120px">
      <el-form-item label="商品名称" prop="name">
        <el-input v-model="formData.name" clearable placeholder="请输入店铺名称" />
      </el-form-item>
      <el-form-item label="商品标签" prop="goodsLabel">
        <div style="display: flex; align-items: center">
          <el-input v-model="inputValue" readonly style="width: 700px" @click="visible = !visible">
            <template #append>
              <el-popover :visible="visible" :width="400" class="m-l100" trigger="click">
                <template #reference>
                  <el-button style="margin-right: 16px" @click="visible = !visible"
                    >查看标签</el-button
                  >
                </template>
                <div
                  style="
                    width: 400px;
                    height: 200px;
                    display: flex;
                    flex-wrap: wrap;
                    overflow: auto;
                  "
                >
                  <el-checkbox-group
                    :max="3"
                    v-model="checkLabel"
                    size="large"
                    @change="changeCheckbox"
                  >
                    <el-checkbox-button
                      v-for="city in lableList"
                      :key="city.id"
                      :value="city.labelName"
                      style="margin: 5px 5px; border: 1px solid"
                    >
                      {{ city.labelName }}
                    </el-checkbox-button>
                  </el-checkbox-group>
                </div>
              </el-popover>
            </template>
          </el-input>
        </div>
      </el-form-item>
      <el-form-item label="商品分类" prop="catId">
        <el-tree-select
          v-model="formData.catId"
          class="!w-240px"
          placeholder="请选择商品分类"
          :data="typeList"
          :render-after-expand="false"
          :props="defaultProps"
        />
      </el-form-item>
      <el-form-item label="店铺" prop="shopId">
        <el-select
          v-model="formData.shopId"
          placeholder="请选择店铺"
          clearable
          filterable
          class="!w-240px"
        >
          <el-option
            v-for="dict in shopPageList"
            :key="dict.id"
            :label="dict.shopName"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="商品条码" prop="goodsNo">
        <el-input v-model="formData.goodsNo" clearable placeholder="请输入商品条码" />
      </el-form-item>
      <el-form-item label="店铺详情" prop="specifications">
        <Editor v-model="formData.specifications" height="150px" />
      </el-form-item>
      <el-form-item label="上下架信息" prop="saleable">
        <el-radio-group v-model="formData.saleable">
          <el-radio key="true" :value="0" border>下架</el-radio>
          <el-radio key="false" :value="1" border>上架</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="库存" prop="stock">
        <el-input v-model="formData.stock" type="number" clearable placeholder="请输入库存" />
      </el-form-item>
      <el-form-item label="是否封禁" prop="status">
        <el-radio-group v-model="formData.status">
          <el-radio key="true" :value="0" border>封禁</el-radio>
          <el-radio key="false" :value="1" border>正常</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否置顶" prop="isTop">
        <el-radio-group v-model="formData.isTop">
          <el-radio key="true" :value="1" border>是</el-radio>
          <el-radio key="false" :value="0" border>否</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- <el-form-item label="商品原价" prop="originPrice">
        <el-input
          v-model="formData.originPrice"
          type="number"
          clearable
          placeholder="请输入商品原价"
        />
      </el-form-item>
      <el-form-item label="商品售价" prop="salePrice">
        <el-input
          v-model="formData.salePrice"
          type="number"
          clearable
          placeholder="请输入商品售价"
        />
      </el-form-item> -->
      <el-form-item label="商品描述" prop="description">
        <Editor v-model="formData.description" height="150px" />
      </el-form-item>
      <el-form-item label="图片地址" prop="icon">
        <UploadImg v-model="formData.icon" />
      </el-form-item>
      <el-form-item label="商品详情" prop="infoList">
        <el-button @click="updateInfoListData('create', null)" type="primary">新增</el-button>
        <ContentWrap>
          <el-table
            v-loading="loading"
            v-model="formData.infoList"
            :data="infoListdata"
            :stripe="true"
            :show-overflow-tooltip="true"
            class="!w-1200px"
          >
            <el-table-column label="商品子标题" align="center" prop="subtitle" />
            <el-table-column label="商品售价" align="center" prop="salePrice" />
            <el-table-column label="操作" align="center" class="w-200px">
              <template #default="scope">
                <el-button type="primary" plain @click="updateInfoListData('update', scope.row)">
                  修改
                </el-button>
                <el-button type="primary" plain @click="openComment('son', scope.row)">
                  评论
                </el-button>
                <el-button type="danger" plain @click="deleteInfoListData(scope.row, scope.$index)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </ContentWrap>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary">提交</el-button>
      <el-button @click="rejectSubmit">取消</el-button>
    </template>
  </Dialog>
  <!-- 子菜单商品详情弹窗 -->
  <Dialog
    :title="dialogShowInputTitleSon"
    v-model="dialogShowList"
    style="display: block; flex-direction: column; width: 1100px"
  >
    <el-form :model="subtitleData" :rules="formRules" label-width="120px">
      <el-form-item label="商品规格" prop="goodsSpec">
        <el-input v-model="subtitleData.goodsSpec" clearable placeholder="请输入商品规格" />
      </el-form-item>
      <el-form-item label="是否套餐" prop="isPlay">
        <el-radio-group v-model="subtitleData.isPlay" @change="radioChange">
          <el-radio key="true" :value="0" border>否</el-radio>
          <el-radio key="false" :value="1" border>是</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="图片地址" prop="imageUrl">
        <UploadImg v-model="subtitleData.imageUrl" />
      </el-form-item>
      <el-form-item label="子标题" prop="subtitle">
        <el-input v-model="subtitleData.subtitle" clearable placeholder="请输入子标题" />
      </el-form-item>
      <el-form-item v-if="subtitleData.isPlay == 0" label="商品描述" prop="description">
        <el-input v-model="subtitleData.description" clearable placeholder="商品描述" />
      </el-form-item>
      <el-form-item v-if="subtitleData.isPlay == 1" label="商品描述" prop="description">
        <el-button @click="updateGoodsSetMealData('create', null)" type="primary">新增</el-button>
        <ContentWrap>
          <el-table
            v-loading="loading"
            v-model="subtitleData.description"
            :data="orderSetMealList"
            :stripe="true"
            :show-overflow-tooltip="true"
            class="!w-1200px"
          >
            <el-table-column label="商品名称" align="center" prop="goodsName" />
            <el-table-column label="商品数量" align="center" prop="goodsNumber" />
            <el-table-column label="商品价格" align="center" prop="goodsPrice" />
            <el-table-column label="商品类型" align="center" prop="goodsType" />
            <el-table-column label="操作" align="center" class="w-200px">
              <template #default="scope">
                <el-button
                  type="primary"
                  plain
                  @click="updateGoodsSetMealData('update', scope.row)"
                >
                  修改
                </el-button>
                <el-button type="danger" plain @click="deleteOrderSetMeal(scope.row, scope.$index)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </ContentWrap>
      </el-form-item>
      <el-form-item label="上下架信息" prop="saleable">
        <el-radio-group v-model="subtitleData.saleable">
          <el-radio key="true" :value="0" border>下架</el-radio>
          <el-radio key="false" :value="1" border>上架</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="库存" prop="stock">
        <el-input v-model="subtitleData.stock" clearable placeholder="请输入库存" />
      </el-form-item>
      <el-form-item label="商品原价" prop="originPrice">
        <el-input v-model="subtitleData.originPrice" clearable placeholder="请输入商品原价" />
      </el-form-item>
      <el-form-item label="商品售价" prop="salePrice">
        <el-input v-model="subtitleData.salePrice" clearable placeholder="请输入商品售价" />
      </el-form-item>
      <el-form-item label="使用规则" prop="useRule">
        <Editor v-model="subtitleData.useRule" height="150px" />
      </el-form-item>
      <el-form-item label="使用时间" prop="useDays">
        <el-input v-model="subtitleData.useDays" clearable placeholder="请输入使用时间" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitInfoList()" type="primary">提交</el-button>
      <el-button @click="closeInfoList">取消</el-button>
    </template>
  </Dialog>
  <Dialog
    title="评论管理"
    v-model="commentShow"
    style="display: block; flex-direction: column; width: 1800px"
  >
    <ContentWrap>
      <el-table
        v-loading="loading"
        :data="goodsCommenList"
        :stripe="true"
        :show-overflow-tooltip="true"
      >
        <el-table-column label="用户名称" align="center" prop="accountName" />
        <el-table-column label="点赞数" align="center" prop="agreeNum" />
        <el-table-column label="商品评价" align="center" prop="goodsComment" />
        <el-table-column label="商品评分" align="center" prop="goodsScore" />
        <el-table-column label="点赞数" align="center" prop="agreeNum" />
        <el-table-column label="图片地址" align="center" prop="imgUrls" />
        <el-table-column label="商品规格" align="center" prop="infoSpec" />
        <el-table-column label="评论来源" align="center" prop="source" />
        <el-table-column label="操作" align="center" class="w-200px">
          <template #default="scope">
            <el-button type="danger" plain @click="goodsCommenDelete(scope.row)"> 删除 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <Pagination
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </ContentWrap>
  </Dialog>
  <Dialog
    :title="dialogShowSetMeal"
    v-model="dialogShowSetMealList"
    style="display: block; flex-direction: column; width: 700px"
  >
    <el-form :model="orderListData" :rules="formRules" label-width="120px">
      <el-form-item label="商品规格" prop="goodsName">
        <el-input v-model="orderListData.goodsName" clearable placeholder="请输入商品名称" />
      </el-form-item>
      <el-form-item label="商品数量" prop="goodsNumber">
        <el-input v-model="orderListData.goodsNumber" clearable placeholder="请输入商品数量" />
      </el-form-item>
      <el-form-item label="商品价格" prop="goodsPrice">
        <el-input v-model="orderListData.goodsPrice" clearable placeholder="请输入商品价格" />
      </el-form-item>
      <el-form-item label="商品类型" prop="goodsType">
        <el-input v-model="orderListData.goodsType" clearable placeholder="请输入商品类型" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitOrderSetMeal()" type="primary">提交</el-button>
      <el-button @click="closeOrderSetMeal">取消</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { SupApi } from '@/api/shops/sup'
// import { StoreTypeApi } from '@/api/shops/storeType';
import { goodsCategoryApi } from '@/api/shops/goods-category'
import { labelApi } from '@/api/shops/label'
import { ElPopover } from 'element-plus'
import { ElMessage } from 'element-plus'

const queryParams = reactive({
  pageNo: 1,
  pageSize: 20,
  name: undefined,
  catId: undefined,
  saleable: undefined,
  status: undefined,
  shopId: undefined
})
const defaultProps = reactive({
  children: 'childs',
  label: 'catName',
  value: 'id'
})
const visible = ref(false)
const formRules = reactive({
  shopName: [{ required: true, message: '商铺名称不能为空', trigger: 'blur' }],
  shopType: [{ required: true, message: '商铺类型不能为空', trigger: 'blur' }],
  status: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
  phoneNumber: [{ required: true, message: '联系人电话不能为空', trigger: 'blur' }]
})

const formData = ref({
  id: undefined,
  catId: undefined,
  goodsNo: undefined,
  shopId: undefined,
  name: undefined,
  specifications: undefined,
  saleable: undefined,
  stock: undefined,
  status: undefined,
  isTop: undefined,
  originPrice: undefined,
  salePrice: undefined,
  infoList: [],
  description: undefined,
  icon: undefined,
  labels: undefined
})

const message = useMessage()
const loading = ref(false)
const list = ref([])
const goodsCommenList = ref([])
const lableList = ref([
  {
    createTime: undefined,
    id: undefined,
    labelDesc: undefined,
    labelName: undefined,
    shopId: undefined
  }
])
const SonDataList = ref({})
const { t } = useI18n() // 国际化
const total = ref(0)
let infoListdata = ref([])
let orderSetMealList = ref([])
let subtitleData = ref({
  goodsSpec: undefined,
  imageUrl: undefined,
  miniUrl: undefined,
  subtitle: undefined,
  description: [] || undefined,
  saleable: undefined,
  stock: undefined,
  originPrice: undefined,
  salePrice: undefined,
  useRule: undefined,
  useDays: undefined,
  isPlay: undefined
})
let orderListData = ref({
  goodsName: undefined,
  goodsNumber: undefined,
  goodsPrice: undefined,
  goodsType: undefined
})
const checkLabel = ref([])
const typeList = ref([])
const getShopName = (shopId: any) => {
  const shop = shopPageList.value.find((shop) => shop.id === shopId)
  return shop ? shop.shopName : ''
}
const statusList = ref([
  { typeName: '封禁', id: 0 },
  { typeName: '正常', id: 1 }
])
const saleableList = ref([
  { typeName: '上架', id: 1 },
  { typeName: '下架', id: 0 }
])
const dialogShowList = ref(false)
const dialogShowSetMealList = ref(false)
const commentShow = ref(false)
const queryFormRef = ref()
const shopPageList = ref([])
const inputValue = ref('')
const dialogShowInputTitle = ref('')
const dialogShowInputTitleSon = ref('')
const dialogShowSetMeal = ref('')
const dialogShowInput = ref(false)

const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}
// 切换子商品类型
const radioChange = () => {
  ElMessage({
    message: '如您添加的商品为套餐，您应该在商品描述里添加套餐内所有商品信息',
    type: 'warning',
    duration: 8000
  })
}
// 商品标签切换
const changeCheckbox = () => {
  inputValue.value = checkLabel.value.toString()
}

// 重置操作
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}
// 评论删除事件
const goodsCommenDelete = async (row: any) => {
  await SupApi.deleteGoodsComment(row.id)
  message.success(t('common.delSuccess'))
}
// 子菜单的详情删除事件
const deleteInfoListData = async (row: any, index: number) => {
  if (row.id) {
    await SupApi.deleteGoodsInfo(row.id)
    infoListdata.value.splice(index, 1)
    message.success(t('common.delSuccess'))
  } else {
    infoListdata.value.splice(index, 1)
    message.success(t('common.delSuccess'))
  }
}
// 套餐的删除事件
const deleteOrderSetMeal = async (row: any, index: number) => {
  if (row.id) {
    orderSetMealList.value.splice(index, 1)
    message.success(t('common.delSuccess'))
  } else {
    orderSetMealList.value.splice(index, 1)
    message.success(t('common.delSuccess'))
  }
}
// 子菜单的提交事件foListdata
const submitInfoList = () => {
  if (dialogShowInputTitleSon.value == '新增') {
    // 检查列表中是否存在相同名称的商品
    const existingItem = infoListdata.value.find(
      (item: any) => item.goodsSpec === subtitleData.value.goodsSpec
    )
    if (existingItem) {
      message.error('商品规格不能重复')
      return // 退出方法，不执行后续操作
    }
    infoListdata.value.push(subtitleData.value)
    dialogShowList.value = false // 关闭弹窗
  } else if ((dialogShowInputTitleSon.value = '修改')) {
    if (SonDataList.value) {
      infoListdata.value.filter((item: any) => {
        if (item.id === SonDataList.value.id) {
          item = subtitleData.value
        }
      })
      dialogShowList.value = false // 关闭弹窗
    } else {
      infoListdata.value.push(subtitleData.value)
      dialogShowList.value = false // 关闭弹窗
    }
  }
}
// 套餐菜单得提交事件
const submitOrderSetMeal = () => {
  // console.log('order',orderListData.value);
  // console.log('orderSetMealList',orderSetMealList.value);

  if (dialogShowSetMeal.value == '新增') {
    // 检查列表中是否存在相同名称的商品
    const existingItem = orderSetMealList.value.find(
      (item: any) => item.goodsName === orderListData.value.goodsName
    )
    if (existingItem) {
      message.error('商品规格不能重复')
      return // 退出方法，不执行后续操作
    }
    orderSetMealList.value.push(orderListData.value)
    subtitleData.value.description = orderSetMealList.value
    console.log('看看', subtitleData.value.description)

    dialogShowSetMealList.value = false // 关闭弹窗
  } else if ((dialogShowSetMeal.value = '修改')) {
    if (SonDataList.value.id) {
      orderSetMealList.value.map((item:any) => {
        if (item.id === SonDataList.value.id) {
          item = orderListData.value
          return item
        }
      }) 
      subtitleData.value.description = orderSetMealList.value
    }
    dialogShowSetMealList.value = false // 关闭弹窗
  }
}

// 子菜单的修改事件
const updateInfoListData = (type: string, row: any) => {
  orderSetMealList.value = []
  if (type === 'create') {
    subtitleData.value = {
      goodsSpec: undefined,
      imageUrl: undefined,
      miniUrl: undefined,
      subtitle: undefined,
      description: [],
      saleable: undefined,
      stock: undefined,
      originPrice: undefined,
      salePrice: undefined,
      useRule: undefined,
      useDays: undefined
    }
    SonDataList.value = {}
    dialogShowInputTitleSon.value = '新增'
    dialogShowList.value = true
  }
  if (type === 'update') {
    dialogShowInputTitleSon.value = '修改'
    SonDataList.value = row
    dialogShowList.value = true
    subtitleData.value = row // 使用 value 属性更新 subtitleData
    // if (row.description && Array.isArray(row.description)) {
    //   row.description = row.description.map((item) => {
    //     item.salePrice = (Number(item.goodsPrice) / 100).toFixed(2)
    //     return item
    //   })
    // }

    if (row.description) {
      list.value = row.list
    }
    if (row.total !== undefined) {
      total.value = row.total
    }
    if (row.isPlay == 1 && row.description) {
      try {
        orderSetMealList.value = JSON.parse(row.description)
      } catch (error) {
        orderSetMealList.value = []
        // 可以在这里处理错误，例如设置一个默认值或显示错误信息
      }
    }
  }
}
// 子菜单团购套餐的修改事件
const updateGoodsSetMealData = (type: string, row: any) => {
  console.log('看看', row)
  if (type == 'create') {
    orderListData.value = {
      goodsName: undefined,
      goodsNumber: undefined,
      goodsPrice: undefined
    }
    dialogShowSetMeal.value = '新增'
    dialogShowSetMealList.value = true
  }
  if (type === 'update') {
    dialogShowSetMeal.value = '修改'
    dialogShowSetMealList.value = true
    orderListData.value = row
  }
}
// 子菜单的取消事件
const closeInfoList = () => {
  dialogShowList.value = false
}
// 套餐菜单得取消事件
const closeOrderSetMeal = () => {
  dialogShowSetMealList.value = false
}
const rejectSubmit = () => {
  dialogShowInput.value = false
}
// 获取评论分页
const openComment = async (type: string, row: any) => {
  commentShow.value = true
  if (type === 'parent') {
    const list = await SupApi.getParentGoodsCommentPage(
      row.id,
      queryParams.pageSize,
      queryParams.pageNo
    )
    goodsCommenList.value = list.list
  }
  if (type === 'son') {
    const list = await SupApi.getSonGoodsCommentPage(
      row.id,
      queryParams.pageSize,
      queryParams.pageNo
    )
    goodsCommenList.value = list.list
  }
}
// 打开父弹窗
const openForm = async (type: string, row: any) => {
  console.log('再看看', row)

  dialogShowInput.value = true
  if (type === 'update') {
    visible.value = false
    dialogShowInputTitle.value = '修改'
    formData.value = row
    formData.value.id = row.id
    // formData.infoList = data.list.infoList.map((item) => {
    //   item.salePrice = (item.salePrice / 100).toFixed(2)
    //   item.originPrice = (item.originPrice / 100).toFixed(2)
    //   return item
    // })
    const label = row.labelList ? row.labelList.map((item: any) => item.labelName) : []
    inputValue.value = label.toString()
    checkLabel.value = label
    infoListdata.value = row.infoList == null ? [] : row.infoList
  }
  if (type === 'create') {
    dialogShowInputTitle.value = '新增'
    visible.value = false
    infoListdata.value = [] // 清空数组
    formData.value = {
      id: undefined,
      catId: undefined,
      goodsNo: undefined,
      name: undefined,
      specifications: undefined,
      saleable: undefined,
      stock: undefined,
      status: undefined,
      isTop: undefined,
      originPrice: undefined,
      salePrice: undefined,
      infoList: [],
      description: undefined,
      icon: undefined
    }
  }
}
// 删除
const handleDelete = async (row: any) => {
  await SupApi.deleteSpu(row.id)
  message.success(t('common.delSuccess'))
  getList()
}
// 初始化页面列表
const getList = async () => {
  loading.value = true
  const data = await SupApi.getShopInfoList()
  shopPageList.value = data
  const typeData = await goodsCategoryApi.getGoodsCategoryPage(0)
  typeList.value = typeData
  let params = {
    pageNo: 1,
    pageSize: 100
  }
  const List = await labelApi.getLabelPage(params)
  lableList.value = List.list
  try {
    const data = await SupApi.getSupPage(queryParams)
    // const datalist = data.list.map(item => {
    //   item.saleable = item.saleable == 0 ? '下架' : '上架'
    //   item.isTop = item.isTop === 0 ? '否' : '是'
    //   return item
    // })
    if (data.list && Array.isArray(data.list.infoList)) {
      data.list.infoList = data.list.infoList.map((item) => {
        item.salePrice = (Number(item.salePrice) / 100).toFixed(2)
        item.originPrice = (Number(item.originPrice) / 100).toFixed(2)
        return item
      })
    }

    if (data.list) {
      list.value = data.list
    }
    if (data.total !== undefined) {
      total.value = data.total
    }
  } finally {
    loading.value = false
  }
}
// 父弹窗的提交事件
const submitForm = async () => {
  try {
    // 确保 infoListdata 被正确添加到 formData
    formData.value.infoList = infoListdata.value
    const label = inputValue.value.split(',')
    const filterArr = lableList.value.filter((item) => label.includes(item.labelName))
    const nameArr = filterArr.map((item) => item.id)
    if (subtitleData.value.isPlay === 1 && subtitleData.value.description instanceof Array) {
      subtitleData.value.description = JSON.stringify(subtitleData.value.description)
    }
    formData.value.labels = nameArr.toString()
    formData.value.originPrice = Number(formData.value.originPrice) * 100
    formData.value.salePrice = Number(formData.value.salePrice) * 100
    if (dialogShowInputTitle.value === '新增') {
      await SupApi.createSup(formData.value)
      message.success(t('common.createSuccess'))
    } else if (dialogShowInputTitle.value === '修改') {
      await SupApi.updateSup(formData.value)
      message.success(t('common.updateSuccess'))
    }
    // 重新获取列表数据
    getList()
  } catch (error) {
    message.error(t('common.updateError'))
  } finally {
    dialogShowInput.value = false // 关闭弹窗
  }
}

onMounted(() => {
  getList()
})
</script>
<style>
/* 全局滚动条宽度 */
::-webkit-scrollbar {
  width: 12px; /* 垂直滚动条的宽度 */
  height: 12px; /* 水平滚动条的高度 */
}
</style>